<script setup lang="ts">
import Chart from './Chart/index.vue'
</script>

<template>
    <div class="main">
        <div class="container">
            <div class="left">
                <div class="title">当前计划</div>
                <div class="OvenNumber">
                    <div class="progress"
                        style="width: 100px; height: 100px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div
                            style="position: relative; width: 100px; height: 100px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                            <Chart></Chart>
                        </div>
                    </div>
                    <div class="oven-info">
                        <p class="oven-text">推焦炉号</p>
                        <p class="oven-time">20:30</p>
                    </div>
                </div>
                <div class="OvenNumber">
                    <div class="progress"
                        style="width: 100px; height: 100px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div
                            style="position: relative; width: 100px; height: 100px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                            <Chart></Chart>
                        </div>
                    </div>
                    <div class="oven-info">
                        <p class="oven-text">装煤炉号</p>
                        <p class="oven-time">21:30</p>
                    </div>
                </div>
                <div data-v-40986143=""
                    class="el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table el-table--layout-fixed table is-scrolling-none"
                    data-prefix="el" style="width: 100%;">
                    <div class="el-table__inner-wrapper">
                        <div class="hidden-columns">
                            <div data-v-40986143=""></div>
                            <div data-v-40986143=""></div>
                            <div data-v-40986143=""></div>
                            <div data-v-40986143=""></div>
                        </div>
                        <div class="el-table__header-wrapper">
                            <table class="el-table__header" border="0" cellpadding="0" cellspacing="0"
                                style="width: 710px;">
                                <colgroup>
                                    <col name="el-table_1_column_1" width="179">
                                    <col name="el-table_1_column_2" width="177">
                                    <col name="el-table_1_column_3" width="177">
                                    <col name="el-table_1_column_4" width="177">
                                </colgroup>
                                <thead class="">
                                    <tr class="">
                                        <th class="el-table_1_column_1 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell"><!----><!----></div>
                                        </th>
                                        <th class="el-table_1_column_2 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell">推焦车<!----><!----></div>
                                        </th>
                                        <th class="el-table_1_column_3 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell">拦焦车<!----><!----></div>
                                        </th>
                                        <th class="el-table_1_column_4 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell">熄焦车<!----><!----></div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="el-table__body-wrapper">
                            <div class="el-scrollbar">
                                <div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default">
                                    <div class="el-scrollbar__view"
                                        style="display: inline-block; vertical-align: middle;">
                                        <table class="el-table__body" cellspacing="0" cellpadding="0" border="0"
                                            style="table-layout: fixed; width: 710px;">
                                            <colgroup>
                                                <col name="el-table_1_column_1" width="179">
                                                <col name="el-table_1_column_2" width="177">
                                                <col name="el-table_1_column_3" width="177">
                                                <col name="el-table_1_column_4" width="177">
                                            </colgroup><!--v-if-->
                                            <tbody tabindex="-1">
                                                <tr class="el-table__row"
                                                    style="height: 50px; font-size: 18px; text-align: center;">
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_1 el-table__cell">
                                                        <div class="cell"><!---->一级联锁</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_2 el-table__cell">
                                                        <div class="cell"><!---->推焦到位</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_3 el-table__cell">
                                                        <div class="cell"><!---->拦焦到位</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_4 el-table__cell">
                                                        <div class="cell"><!---->熄焦到位</div>
                                                    </td>
                                                </tr>
                                                <tr class="el-table__row"
                                                    style="height: 50px; font-size: 18px; text-align: center;">
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_1 el-table__cell">
                                                        <div class="cell"><!---->二级联锁</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_2 el-table__cell">
                                                        <div class="cell"><!---->推焦允许</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_3 el-table__cell">
                                                        <div class="cell"><!---->拦焦允许</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_4 el-table__cell">
                                                        <div class="cell"><!---->熄焦允许</div>
                                                    </td>
                                                </tr>
                                                <tr class="el-table__row"
                                                    style="height: 50px; font-size: 18px; text-align: center;">
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_1 el-table__cell">
                                                        <div class="cell"><!---->装煤允许</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_2 el-table__cell">
                                                        <div class="cell"><!---->推焦允许装煤</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_3 el-table__cell">
                                                        <div class="cell"><!---->推焦允许装煤</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_4 el-table__cell">
                                                        <div class="cell"><!---->熄焦允许装煤</div>
                                                    </td>
                                                </tr>
                                            </tbody><!--v-if-->
                                        </table><!--v-if--><!--v-if-->
                                    </div>
                                </div>
                                <div class="el-scrollbar__bar is-horizontal" style="display: none;">
                                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                                </div>
                                <div class="el-scrollbar__bar is-vertical" style="display: none;">
                                    <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                                </div>
                            </div>
                        </div><!--v-if--><!--v-if-->
                    </div>
                    <div class="el-table__column-resize-proxy" style="display: none;"></div>
                </div>
            </div>
            <div class="right">
                <div class="title">下一计划</div>
                <div class="OvenNumber">
                    <div class="progress" _echarts_instance_="ec_1743509148693"
                        style="width: 100px; height: 100px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div
                            style="position: relative; width: 100px; height: 100px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                            <Chart></Chart>
                        </div>
                    </div>
                    <div class="oven-info">
                        <p class="oven-text">推焦炉号</p>
                        <p class="oven-time">20:30</p>
                    </div>
                </div>
                <div class="OvenNumber">
                    <div class="progress" _echarts_instance_="ec_1743509148694"
                        style="width: 100px; height: 100px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div
                            style="position: relative; width: 100px; height: 100px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                            <Chart></Chart>
                        </div>
                    </div>
                    <div class="oven-info">
                        <p class="oven-text">装煤炉号</p>
                        <p class="oven-time">21:30</p>
                    </div>
                </div>
                <div data-v-40986143=""
                    class="el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table el-table--layout-fixed table is-scrolling-none"
                    data-prefix="el" style="width: 100%;">
                    <div class="el-table__inner-wrapper">
                        <div class="hidden-columns">
                            <div data-v-40986143=""></div>
                            <div data-v-40986143=""></div>
                            <div data-v-40986143=""></div>
                            <div data-v-40986143=""></div>
                        </div>
                        <div class="el-table__header-wrapper">
                            <table class="el-table__header" border="0" cellpadding="0" cellspacing="0"
                                style="width: 710px;">
                                <colgroup>
                                    <col name="el-table_1_column_1" width="179">
                                    <col name="el-table_1_column_2" width="177">
                                    <col name="el-table_1_column_3" width="177">
                                    <col name="el-table_1_column_4" width="177">
                                </colgroup>
                                <thead class="">
                                    <tr class="">
                                        <th class="el-table_1_column_1 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell"><!----><!----></div>
                                        </th>
                                        <th class="el-table_1_column_2 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell">推焦车<!----><!----></div>
                                        </th>
                                        <th class="el-table_1_column_3 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell">拦焦车<!----><!----></div>
                                        </th>
                                        <th class="el-table_1_column_4 is-leaf el-table__cell" colspan="1" rowspan="1"
                                            style="text-align: center; color: rgb(83, 186, 219); font-size: 22px;">
                                            <div class="cell">熄焦车<!----><!----></div>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="el-table__body-wrapper">
                            <div class="el-scrollbar">
                                <div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default">
                                    <div class="el-scrollbar__view"
                                        style="display: inline-block; vertical-align: middle;">
                                        <table class="el-table__body" cellspacing="0" cellpadding="0" border="0"
                                            style="table-layout: fixed; width: 710px;">
                                            <colgroup>
                                                <col name="el-table_1_column_1" width="179">
                                                <col name="el-table_1_column_2" width="177">
                                                <col name="el-table_1_column_3" width="177">
                                                <col name="el-table_1_column_4" width="177">
                                            </colgroup><!--v-if-->
                                            <tbody tabindex="-1">
                                                <tr class="el-table__row"
                                                    style="height: 50px; font-size: 18px; text-align: center;">
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_1 el-table__cell">
                                                        <div class="cell"><!---->一级联锁</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_2 el-table__cell">
                                                        <div class="cell"><!---->推焦到位</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_3 el-table__cell">
                                                        <div class="cell"><!---->拦焦到位</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_4 el-table__cell">
                                                        <div class="cell"><!---->熄焦到位</div>
                                                    </td>
                                                </tr>
                                                <tr class="el-table__row"
                                                    style="height: 50px; font-size: 18px; text-align: center;">
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_1 el-table__cell">
                                                        <div class="cell"><!---->二级联锁</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_2 el-table__cell">
                                                        <div class="cell"><!---->推焦允许</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_3 el-table__cell">
                                                        <div class="cell"><!---->拦焦允许</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_4 el-table__cell">
                                                        <div class="cell"><!---->熄焦允许</div>
                                                    </td>
                                                </tr>
                                                <tr class="el-table__row"
                                                    style="height: 50px; font-size: 18px; text-align: center;">
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_1 el-table__cell">
                                                        <div class="cell"><!---->装煤允许</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_2 el-table__cell">
                                                        <div class="cell"><!---->推焦允许装煤</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_3 el-table__cell">
                                                        <div class="cell"><!---->推焦允许装煤</div>
                                                    </td>
                                                    <td colspan="1" rowspan="1"
                                                        class="el-table_1_column_4 el-table__cell">
                                                        <div class="cell"><!---->熄焦允许装煤</div>
                                                    </td>
                                                </tr>
                                            </tbody><!--v-if-->
                                        </table><!--v-if--><!--v-if-->
                                    </div>
                                </div>
                                <div class="el-scrollbar__bar is-horizontal" style="display: none;">
                                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                                </div>
                                <div class="el-scrollbar__bar is-vertical" style="display: none;">
                                    <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                                </div>
                            </div>
                        </div><!--v-if--><!--v-if-->
                    </div>
                    <div class="el-table__column-resize-proxy" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.main {
    width: 100%;
    height: 40vh;

    .container {
        color: #fff;
        display: flex;
        width: 100%;
        justify-content: space-around;

        .left {
            width: 40%;
            flex-wrap: wrap;
            align-content: flex-start;
            background: url('http://xucode.cn:8066/img/bottopm.png');
            height: 400px;
            background-size: 100% 100%;
            display: flex;
            // margin: 0 50px;
            color: #fff;

            .title {
                flex: .8;
                margin: 55px 0 0 75px;
                height: 50px;
                font-size: 35px;
            }

            .el-table--fit {
                margin: 0 50px;
            }

            .OvenNumber {
                flex: 1;
                height: 120px;
                margin: 50px 0 0 10px;
                display: flex;
                align-items: center;
            }

            .progress {
                width: 100px;
                height: 100px;
                user-select: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                margin: 0;
                color: #fff;
                padding: 0;
            }
        }

        .right {
            width: 40%;
            flex-wrap: wrap;
            align-content: flex-start;
            background: url('http://xucode.cn:8066/img/bottopm.png');
            height: 400px;
            background-size: 100% 100%;
            display: flex;
            // margin: 0 50px;
            color: #fff;

            .title {
                flex: .8;
                margin: 55px 0 0 75px;
                height: 50px;
                font-size: 35px;
            }

            .OvenNumber {
                flex: 1;
                height: 120px;
                margin: 50px 0 0 10px;
                display: flex;
                align-items: center;
            }
        }



        .oven-info {
            display: flex;
            flex-direction: column;
            margin: 0;
            color: #fff;

            .oven-text {
                width: 80px;
                font-size: 20px;
                font-weight: 700;
                text-align: left;
                margin: 10px;
            }

            .oven-time {
                font-size: 20px;
                font-weight: 700;
                text-align: left;
                margin: 10px;
                color: '#fff';
            }
        }

    }
}
</style>
